<template>
  <div style="height: calc(100% - 2px)">
    <div class="top-bar">
      <div class="right">
        <el-button type="primary" @click="addSjy()">新增</el-button>
      </div>
    </div>
    <el-table
        :data="sjyList"
        height="calc(100% - 28px)"
        stripe
        style="width: 100%">
      <el-table-column
          label="序号"
          type="index"
          width="50">
      </el-table-column>
      <el-table-column
          label="数据源名称"
          prop="sjymc"
          width="235px">
      </el-table-column>
      <el-table-column
          label="数据源地址"
          prop="sjydz"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="关联参数"
          prop="glcs"
          show-tooltip-when-overflow
          width="235px">
      </el-table-column>
      <el-table-column
          label="创建人员名称"
          prop="rymc"
          sortable
          width="150">
      </el-table-column>
      <el-table-column
          label="创建时间"
          prop="cjsj"
          sortable
          width="180">
      </el-table-column>
      <el-table-column
          label="操作"
          width="110px">
        <template slot-scope="{row}">
          <el-link type="primary" @click="addSjy(row)">编辑</el-link>
          <el-link v-show="row.sfsc==='N'" style="margin-left: 15px" type="danger"
                   @click="preDel(delSjy,row,`即将删除【${row.sjymc}】,删除后不可恢复，是否继续？`)">
            删除
          </el-link>
          <el-link v-show="row.sfsc==='Y'" style="margin-left: 15px" type="primary" @click="undeleteSjy(row)">恢复
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <xj-dialog :title="(sjyForm.sjybm?'编辑':'新增')+'数据源'"
               :visible="addSjyDialogVisible">
      <el-form :model="sjyForm">
        <el-form-item label="数据源名称" label-width="120px">
          <el-input v-model="sjyForm.sjymc" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数据源地址" label-width="120px">
          <el-input v-model="sjyForm.sjyhost" autocomplete="off">
            <template slot="prepend">
              <el-select v-model="sjyForm.sjdzxy" placeholder="请选择" style="width: 85px;">
                <el-option label="http://" value="http"></el-option>
                <el-option label="https://" value="https"></el-option>
              </el-select>
            </template>
            <template slot="append">
              <el-button type="primary" @click="getSjy">测试</el-button>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="关联参数" label-width="110px">
          <vue-json-editor v-model="sjyForm.glcsObj" lang="zh" mode="code"/>
        </el-form-item>
        <el-form-item label="测试结果" label-width="110px">
          <!--          <vue-json-editor v-model="testResult" lang="zh" mode="code"/>-->
          <el-tree
              ref="tree"
              :data="testResult"
              :props="props">
          </el-tree>
        </el-form-item>

      </el-form>
      <div slot="footer">
        <el-button @click="handleAddSjyBtnClick(false)">取消</el-button>
        <el-button type="primary" @click="handleAddSjyBtnClick(true)">确定</el-button>
      </div>
    </xj-dialog>
  </div>
</template>

<script>
import commonMixins from "@/mixins/commonMixins";
import XjDialog from "@/components/XjDialog";
import vueJsonEditor from "vue-json-editor";

export default {
  name: "Sjygl",
  components: { XjDialog, vueJsonEditor },
  mixins: [commonMixins],
  data () {
    return {
      sjyList: [],
      addSjyDialogVisible: false,
      props: { id: 'dm', label: 'mc' },
      sjyForm: {
        sjybm: '',
        sjymc: '',
        sjyhost: '',
        sjdzxy: '',
      },
      testResult: []
    }
  },
  mounted () {
    this.querySjyList()
  },
  methods: {
    async getSjy () {
      let sjydz = this.sjyForm.sjdzxy + "://" + this.sjyForm.sjyhost.trim()
      let res = await this.$api.getSjysj({
        glcs: JSON.stringify(this.sjyForm.glcsObj),
        sjydz: sjydz
      })
      this.testResult = this.$listToTree(res, 'dm', 'fdm')
    },
    async querySjyList () {
      this.sjyList = await this.$api.querySjyList({ rybm: this.yhxx.rybm })
    },
    async handleAddSjyBtnClick (isConfirm) {
      let sjydz = this.sjyForm.sjdzxy + "://" + this.sjyForm.sjyhost.trim()
      if (isConfirm) {
        // 进行保存
        try {
          if (this.sjyForm.sjybm) {
            await this.$api.updateSjy({
              sjybm: this.sjyForm.sjybm,
              sjymc: this.sjyForm.sjymc,
              glcs: JSON.stringify(this.sjyForm.glcsObj),
              sjydz: sjydz
            })
          } else {
            await this.$api.addSjy({
              sjymc: this.sjyForm.sjymc,
              glcs: JSON.stringify(this.sjyForm.glcsObj),
              sjydz: sjydz,
              rybm: this.yhxx.rybm,
              rymc: this.yhxx.mc,
            })
          }
          this.querySjyList()
        } catch (e) {
          this.$message({ message: e.message, sjly: 'error' })
          return
        }
      }
      this.addSjyDialogVisible = false
      this.sjyForm = {
        sjybm: '',
        sjymc: '',
        sjyhost: '',
        sjdzxy: '',
        glcsObj: {}
      }
    },
    addSjy (sjy) {
      this.testResult = []
      if (!sjy) {
        sjy = {
          sjybm: '',
          sjymc: '',
          sjydz: 'http://',
          glcs: '{}'
        }
      }
      let res = sjy.sjydz.split("://")
      this.sjyForm = JSON.parse(JSON.stringify({
        ...sjy,
        glcsObj: JSON.parse(sjy.glcs) || {},
        sjyhost: res[1],
        sjdzxy: res[0],
      }))
      this.addSjyDialogVisible = true
    },
    async delSjy (sjy) {
      try {
        await this.$api.deleteSjy({
          sjybm: sjy.sjybm,
        })
        this.querySjyList()
      } catch (e) {
        this.$message({ message: e.message, sjly: 'error' })
      }
    },
    async undeleteSjy (sjy) {
      await this.$api.undeleteSjy({
        sjybm: sjy.sjybm,
      })
      this.querySjyList()
    }
  }
}
</script>
